.toggle {
	justify-content: center;
	align-items: center;
	svg {
		fill: none;
		stroke-width: 7px;
		stroke-linecap: round;
		stroke-linejoin: round;
		use {
			&:nth-of-type(1) {
				opacity: 1;
				stroke-dashoffset: 221;
				stroke-dasharray: 46 249;
				transition: stroke-dashoffset 0.12s linear 0.2s, stroke-dasharray 0.12s linear 0.2s,
					opacity 0s linear 0.2s;
			}
			&:nth-of-type(2) {
				animation: stroke-animation-reverse 1.2s ease-out forwards;
			}
		}
	}
	input {
		position: absolute;
		height: 100%;
		width: 100%;
		z-index: 2;
		cursor: pointer;
		opacity: 0;
		&:checked {
			+ svg {
				use {
					&:nth-of-type(1) {
						stroke-dashoffset: 175;
						stroke-dasharray: 0 295;
						opacity: 0;
						transition: stroke-dashoffset 0.07s linear 0.07s,
							stroke-dasharray 0.07s linear 0.07s, opacity 0s linear 0.14s;
					}
					&:nth-of-type(2) {
						animation: stroke-animation 1.2s ease-out forwards;
					}
				}
			}
		}
	}
}

@keyframes stroke-animation {
	0% {
		stroke-dashoffset: 295;
		stroke-dasharray: 25 270;
	}
	50% {
		stroke-dashoffset: 68;
		stroke-dasharray: 59 236;
	}
	65% {
		stroke-dashoffset: 59;
		stroke-dasharray: 59 236;
	}
	100% {
		stroke-dashoffset: 68;
		stroke-dasharray: 59 236;
	}
}

@keyframes stroke-animation-reverse {
	0% {
		stroke-dashoffset: 68;
		stroke-dasharray: 59 236;
	}
	50% {
		stroke-dashoffset: 290;
		stroke-dasharray: 25 270;
	}
	65% {
		stroke-dashoffset: 295;
		stroke-dasharray: 25 270;
	}
	100% {
		stroke-dashoffset: 290;
		stroke-dasharray: 25 270;
	}
}
